<template>
  <div>
    <!-- 有三种情况：
    1、没有图片
    2、一张
    3、三张 -->
    <!-- :to="'/article/'+article.art_id" -->
      <van-cell title="单元格"  :to="{name:'article',params:{articleId:article.art_id}}">
        <template #title>
          <span class="title van-multi-ellipsis--l2">{{article.title}}</span>
        </template>
        <template #label>
          <div v-if="article.cover.type===3" class="image-wrap">
            <van-image width="100" height="100" v-for="(item,index) in article.cover.images" :src="item" :key="index" />
          </div>
          <span>{{article.aut_name}}</span>
          <span>{{article.comm_count}}</span>
          <span>{{article.pubdate | relativeTime}}</span>
        </template>
        <template #default v-if="article.cover.type===1">
          <van-image width="100" height="100" :src="article.cover.images[0]" />
        </template>
      </van-cell>
  </div>
</template>
<script>
export default {
  // 递归组件 keep-alive可以缓存 vue控制台可以快速定位
  name: 'ArticleItem',
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {

    }
  },
  methods: {

  },
  created () {
    console.log(this.article)
  }
}
</script>
<style scoped lang="less">
.van-cell__value{
  width: 232px;
  height: 146px;
  // unset值的含义 把自身的值去掉，如果是可以继承的样式(text-align,color)，就从父元素继承
  flex:unset;
}
.image-wrap{
  display: flex;
}
</style>
